<!DOCTYPE html>
<html lang="en">
  <head>
    {% block head %}
      {% block meta %}
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="shortcut icon" href="/static/images/favicon.ico?v1029">

      {% endblock meta %}

      <title>{{ settings.name }} | {% block title %}{% endblock %}</title>

      {% block stylesheets %}
        <!-- Bootstrap -->
        <link href="/static/lib/bootstrap/css/bootstrap.css" rel="stylesheet">
        <!-- Font Awesome -->
        <link href="/static/vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
        <!-- NProgress -->
        <link href="/static/vendors/nprogress/nprogress.css" rel="stylesheet">
        <!-- iCheck -->
        <link href="/static/vendors/iCheck/skins/flat/green.css" rel="stylesheet">
        <!-- bootstrap-progressbar -->
        <link href="/static/vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet">
        <!-- JQVMap -->
        <!--<link href="/static/vendors/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>-->

      {% endblock stylesheets %}
      <!-- Custom Theme Style -->
      <link href="/static/build/css/custom.css?v1029002" rel="stylesheet">
      <!-- Modern Theme Style -->
      <link href="/static/build/css/modern.css?v1029002" rel="stylesheet">
    {% endblock head %}
  </head>

  <body class="{% block body_class %}nav-md {% endblock body_class %}">
    {% block body %}
      <div class="container body">
        <div class="main_container">

          {% block sidebar %}
            <div class="left_col {% block sidebar_class %} {% endblock sidebar_class %}">
              {% include "app/sidebar_modern.html" %}
            </div>
          {% endblock sidebar %}

          {% block top_navigation %}
            <div class="top_nav">
              {% include "app/top_navigation.html" %}
            </div>
          {% endblock top_navigation %}

          {% block content %}
            <!-- {{ content }} -->
          {% endblock content %}

          {% block footer %}
            <footer>
              {% include "app/footer.html" %}
            </footer>
          {% endblock footer %}
        </div>
      </div>

      {% block javascripts %}
        <!-- jQuery -->
        <script src="/static/lib/jquery/jquery.min.js"></script>
        <link href="/static/lib/jquery/toast/1.3.2/jquery.toast.css?v=2" rel="stylesheet">
        <script src="/static/lib/jquery/toast/1.3.2/jquery.toast.min.js"></script>
        <script src="/static/lib/jquery/toast/1.3.2/toast.js"></script>
        <!-- Bootstrap -->
        <script src="/static/lib/bootstrap/js/bootstrap.min.js"></script>
        <!-- FastClick -->
        <script src="/static/vendors/fastclick/lib/fastclick.js"></script>
        <!-- NProgress -->
        <script src="/static/vendors/nprogress/nprogress.js"></script>
        <!-- bootstrap-progressbar -->
        <script src="/static/vendors/bootstrap-progressbar/bootstrap-progressbar.min.js"></script>
        <!-- iCheck -->
        <script src="/static/vendors/iCheck/icheck.min.js"></script>
        <!-- bootstrap-wysiwyg -->
        <script src="/static/vendors/bootstrap-wysiwyg/js/bootstrap-wysiwyg.min.js"></script>
        <script src="/static/vendors/jquery.hotkeys/jquery.hotkeys.js"></script>
        <script src="/static/vendors/google-code-prettify/src/prettify.js"></script>
        <!-- jQuery Tags Input -->
        <script src="/static/vendors/jquery.tagsinput/src/jquery.tagsinput.js"></script>
        <!-- Switchery -->
        <script src="/static/vendors/switchery/dist/switchery.min.js"></script>
        <!-- Select2 -->
        <script src="/static/vendors/select2/dist/js/select2.full.min.js"></script>
        <!-- Parsley -->
        <!-- Autosize -->
        <script src="/static/vendors/autosize/dist/autosize.min.js"></script>
        <!-- jQuery autocomplete -->
        <script src="/static/vendors/devbridge-autocomplete/dist/jquery.autocomplete.min.js"></script>
        <!-- starrr -->
        <script src="/static/vendors/starrr/dist/starrr.js"></script>

      {% endblock %}
      <!-- Custom Theme Scripts -->
      <script src="/static/build/js/custom.js?1001"></script>
      
      <!-- 现代化侧边栏交互脚本 -->
      <script>
        $(document).ready(function() {
          // 更精确的菜单状态管理
          function setActiveMenu() {
            var currentPath = window.location.pathname;
            console.log('当前路径:', currentPath);
            
            // 清除所有active状态
            $('.menu-item').removeClass('active');
            $('.has-submenu').removeClass('active');
            $('.submenu').css('max-height', '0');
            
            // 查找匹配的菜单项
            var foundMatch = false;
            
            // 精确匹配优先
            $('.menu-link[href]').each(function() {
              var href = $(this).attr('href');
              if (href && href !== 'javascript:void(0);' && href !== '#') {
                if (currentPath === href) {
                  console.log('精确匹配:', href);
                  activateMenu($(this));
                  foundMatch = true;
                  return false; // 找到精确匹配就停止
                }
              }
            });
            
            // 如果没有精确匹配，尝试包含匹配
            if (!foundMatch) {
              $('.menu-link[href]').each(function() {
                var href = $(this).attr('href');
                if (href && href !== 'javascript:void(0);' && href !== '#' && href !== '/') {
                  if (currentPath.indexOf(href) !== -1) {
                    console.log('包含匹配:', href);
                    activateMenu($(this));
                    foundMatch = true;
                    return false; // 找到第一个匹配就停止
                  }
                }
              });
            }
            
            // 如果还是没有匹配，尝试根路径
            if (!foundMatch && currentPath === '/') {
              $('.menu-link[href="/"]').each(function() {
                console.log('根路径匹配');
                activateMenu($(this));
              });
            }
            
            // 如果还是没有匹配，尝试子菜单项匹配
            if (!foundMatch) {
              $('.submenu-link[href]').each(function() {
                var href = $(this).attr('href');
                if (href && currentPath === href) {
                  console.log('子菜单精确匹配:', href);
                  activateMenu($(this));
                  foundMatch = true;
                  return false;
                }
              });
            }
          }
          
          function activateMenu($link) {
            // 激活当前菜单项
            $link.parent().addClass('active');
            
            // 如果当前菜单项在子菜单中，展开所有父级菜单
            var $parentMenus = $link.parents('.has-submenu');
            $parentMenus.each(function() {
              var $parent = $(this);
              $parent.addClass('active');
              var $submenu = $parent.find('.submenu');
              $submenu.css('max-height', $submenu[0].scrollHeight + 'px');
            });
          }
          
          // 子菜单展开/收起功能
          $('.has-submenu > .menu-link').on('click', function(e) {
            e.preventDefault();
            var $parent = $(this).parent();
            var $submenu = $parent.find('.submenu');
            
            // 切换当前子菜单
            if ($parent.hasClass('active')) {
              $parent.removeClass('active');
              $submenu.css('max-height', '0');
            } else {
              // 关闭其他展开的子菜单
              $('.has-submenu').not($parent).removeClass('active');
              $('.submenu').not($submenu).css('max-height', '0');
              
              $parent.addClass('active');
              $submenu.css('max-height', $submenu[0].scrollHeight + 'px');
            }
          });
          
          // 初始化菜单状态
          setTimeout(setActiveMenu, 100);
          
          // 监听URL变化
          $(window).on('popstate', function() {
            setTimeout(setActiveMenu, 150);
          });
          
          // 监听页面内容变化（适用于AJAX加载）
          $(document).on('DOMSubtreeModified', function() {
            setTimeout(setActiveMenu, 100);
          });
          
          // 监听页面加载完成
          $(window).on('load', function() {
            setTimeout(setActiveMenu, 200);
          });
        });
      </script>

    {% endblock body %}
  </body>
</html>
